<template>
  <div class="mark-six-box">
    <!--下注底部弹窗-->
    <Popup v-model:show="show" position="bottom" class="investPopupHeight" :overlay="false">
      <div class="popup">
        <div class="top-box row-space-between" @click="show = !show">
          <div class="left-box all-center">
            <div class="content"></div>
          </div>
          <div class="center-box all-center">
            单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万
            <!-- <div class="content" @click="show = !show"></div> -->
          </div>
          <div class="right-box all-center">
            <Icon name="arrow-down" color="#FFFFFF" size="22" />
          </div>
        </div>
        <div class="pop">
          <div class="popup-lf">
            <div
              class="li"
              v-for="(item, index) in gameTemplateData"
              :class="currentGameType === index ? 'actives' : ''"
              @click="setCurrentGameType(index)"
              :key="index"
            >
              {{ item.playTypeName }}
            </div>
          </div>
          <div class="popup-content">
            <Handicap @update-template="fetchGameTemplateData"/>
            <!-- 游戏类型 -->
            <component ref="gameRef" :is="getGameComponentTag" :renderData="getCurrentGameData"></component>
          </div>
        </div>

        <!-- 下注 -->
        <investPopup @betNow="betNow($refs)" @updateInvestList="clearInvestList($refs)" />
      </div>
    </Popup>
  </div>
</template>

<script>
import OddsBtn from './odds-btn.vue'
import TMZ_GAME from './xglhc-tm-game.vue'
import TX_GAME from './xglhc-tx-game.vue'
import TMSB_GAME from './xglhc-tmsb-game.vue'
import ZM_GAME from './xglhc-zm-game.vue'
import LM_GAME from './xglhc-lm-game.vue'
import LX_GAME from './xglhc-lx-game.vue'
import ZXBZ_GAME from './xglhc-zxbz-game.vue'
import investPopup from '@/components/invest-popup.vue'
import { mapState, mapActions, mapGetters } from 'pinia'
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { useXglhcStore } from '@/stores/xglhc'
import { $utils } from '@/utils'
import { Popup, Icon } from 'vant'
import Handicap from '@/components/Handicap.vue'

export default {
  components: {
    OddsBtn,
    investPopup,
    TMZ_GAME,
    TX_GAME,
    TMSB_GAME,
    ZM_GAME,
    LM_GAME,
    LX_GAME,
    ZXBZ_GAME,
    Popup,
    Icon,
    Handicap
  },
  data() {
    return {
      playTemplateData: null, // 游戏渲染数据
      currentMenuIndex: 0, //当前游戏索引
      currentPlayTypeIndex: 0, //当前游戏玩法类型
      showRecord: false, //显示历史记录列表
      showMenu: false, //菜单弹窗
      show: false, //游戏弹窗

      value: '',
      showsh: 0,
      actives: -1,
      activeti: 0,
      activete: 0,
      popactives: 0,
      withdraw: false,
      showsho: false,
      btnactive: 1,
      showovers: true,
      touchs: false,
      activeout: 0,
      activeouts: 0,
      activeinners: 0,
      digit: '',
    }
  },
  mounted() {
    this.init()
  },

  computed: {
    ...mapState(useXglhcStore, {
      currentGameType: (state) => state.currentGameType,
      gameTemplateData: (state) => state.gameTemplateData,
    }),
    ...mapState(useGameStore, {
      currentGame: (state) => state.currentGame,
      drawingStatus: (state) => state.drawingStatus,
    }),
    ...mapGetters(useGameStore, ['allGame']),
    ...mapGetters(useXglhcStore, ['getCurrentGameData', 'getGameComponentTag', 'getPlayTypeCodeList']),

    // ...mapState("invest", {
    //   showEditMoneyPopup: state => state.showEditMoneyPopup,
    //   investMoneyOpts: state => state.investMoneyOpts,
    // 	}),
    haveData() {
      return this.showMenu && !$utils.isEmpty(this.gameTemplateData)
    },
  },

  methods: {
    ...mapActions(useXglhcStore, ['init', 'setCurrentGameType', 'betNow', 'clearInvestList', 'fetchGameTemplateData']),

    numberToChinese,

    // 打开下注弹窗
    open() {
      this.show = true
      if ($utils.isEmpty(this.gameTemplateData)) {
        this.fetchGameTemplateData()
      }
    },
  },
}
</script>

<style scoped lang="less">
@import url('./markSix.less');
</style>
